<template>
    <div class="input-content" >
        <div class="input-label" :style="dynStyle.labelStyle">
            <span v-if="props.required" style="color:red;">*</span>{{caption}}
        </div>
        <div class="input-el-content" :style="dynStyle.inputStyle">
            <el-select class="custom-el-input" 
                v-model="selectValue" 
                v-bind="props"
                @change="handleChange">
                <el-option v-for="item in options" :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"/>
            </el-select>
        </div>
    </div>
</template>
  
<script>

import { defineComponent, ref } from "vue";
// 继承的父组件
import EmapFormBaseItem from "./emap-form-base-item.vue";
// 引入表单子控件的管理类
import formItemManage from "../controlManage/formItemManage";
// 引入组件需要的属性
import { baseFormProps, baseStyleProps, selectProps } from "../formItemMeta.js";

export default defineComponent({
    extends: EmapFormBaseItem, //继承
    name: "el-form-select",
    props: {
        ...selectProps
    },
    emits: [],
    setup(props, context) {
        //console.log(props);
        // 控件绑定值
        let selectValue = ref();
        // 获取字典选项
        let options = ((dic)=>{
            console.log('dic', dic);
            if(dic){
                return [   // TODO
                    {
                        label: 'item1',
                        value: 'value1',
                        disabled: false
                    },{
                        label: 'item2',
                        value: 'value2',
                        disabled: false
                    },{
                        label: 'item3',
                        value: 'value3',
                        disabled: false
                    },{
                        label: 'item4',
                        value: 'value4',
                        disabled: false
                    },{
                        label: 'item5',
                        value: 'value5',
                        disabled: false
                    }
                ]
            }
        })(props.url);

        return {
            ...EmapFormBaseItem.setup(props, context),  // supur
            ...formItemManage(props, context),
            selectValue,
            options
        };
    }
});
    
</script>


<style scoped>
@import url('./emap-form-item.css');
</style>